<template>
  <div class="unbind">
    <el-form
      ref="ruleForm"
      class="form"
      label-position="right"
      label-width="160px"
      :model="formLabelAlign"
      :rules="rules"
    >
      <div class="title-container">
        <h3 class="title">{{ $t("unbind.emailVerification") }}</h3>
      </div>
      <el-form-item
        style="color: #fff"
        class="lable"
        :label="$t('unbind.email')"
        prop="email"
      >
        <el-input v-model="formLabelAlign.email" />
      </el-form-item>
      <div class="code">
        <!-- prop="code" -->
        <el-form-item :label="$t('unbind.code')">
          <el-input v-model="formLabelAlign.code" />
        </el-form-item>
        <div>
          <el-button
            :disabled="disabled"
            type="primary"
            plain
            style="width: 180px"
            @click="getCode"
          >{{ text }}</el-button>
        </div>
      </div>
      <div class="sp_center confirm">
        <el-button
          class="btn"
          :loading="loading"
          type="primary"
          style="margin-bottom: 30px"
          @click="submitForm('ruleForm')"
        >{{ $t("unbind.confirm") }}</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
var count = 60
var timer = null
export default {
  data() {
    var validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please enter email address'))
      } else {
        if (
          !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
            value
          )
        ) {
          callback(new Error('Email format error'))
        }
        callback()
      }
    }
    return {
      formLabelAlign: {
        email: '',
        code: ''
      },
      rules: {
        email: [{ validator: validateEmail, trigger: 'blur' }],
        code: [
          {
            required: true,
            message: 'Please enter the verification code',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      text: this.$t('unbind.getCode'),
      disabled: false
    }
  },
  mounted() {},
  methods: {
    getCode() {
      this.$refs['ruleForm'].validate(async(valid) => {
        if (valid) {
          var that = this
          /* 防止用户重复点击按钮*/
          if (timer == null) {
            that.disabled = true
            that.$message({
              message: this.$t('unbind.successTip'),
              type: 'success'
            })
            timer = setInterval(() => {
              count--
              that.text = count + 'S'
              if (count <= 0) {
                clearInterval(timer)
                that.text = this.$t('unbind.getCode')
                that.disabled = false
                timer = null
              }
            }, 1000)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          this.$router.push({
            path: '/change-password'
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.unbind {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  padding-top: 140px;
  .form {
    position: relative;
    width: 560px;
    max-width: 100%;
    padding: 20px 35px 0;

    background: white;
    margin: 0 auto;
    overflow: hidden;
    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        // color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }

      .set-language {
        color: #fff;
        position: absolute;
        top: 3px;
        font-size: 18px;
        right: 0px;
        cursor: pointer;
      }
    }
    .code {
      display: flex;
    }
  }
  .confirm {
    width: 100%;
    .btn {
      width: 100%;
    }
  }
}
</style>
